經過昨天的學習，我們已經對 JSX 的使用和規則有基本的認識。
透過 JSX 能夠建立元素(element)，
並將多個元素組合在一起，就能創建出「元件」（Component）。
在開發中，當我們發現某些功能或區塊常重複使用時，
可以將它們模組化，變成獨立且可重用的 React 元件，
提高開發效率，也讓程式碼更容易維護。

以函式實現React component

使用 function 建立的元件，也稱為 Function Component。
我們會使用 JSX 的語法來建立元件(component)，如下方範例：

function MyButton() {
  return <button>Click Me</button>;
}

在這範例中，MyButton 是我們自製的元件，名稱以大寫字母開頭，這讓 JSX 能夠正確識別並渲染。
在使用 JSX 建立元件時，有一個關鍵的規則：

元件的名稱必須以大寫字母開頭，並且名稱應與函式相同。

這樣 JSX 才能識別這是你自製的元件，而不是內建的 HTML 標籤。
當我們要使用自製元件MyButton 時，可以這樣做

//函式名稱為大寫字母
function MyButton() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
	    <MyButton/>  
	    <button>Click Me Again</button>
    <div/>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
  <App/>
  </React.StrictMode>
);

渲染後的頁面會顯示兩個按鈕，一個是自製元件 <MyButton />，另一個是普通的 <button> 元素。

Function Component的規則

1. 必須以大寫字母開頭：函式元件的名稱必須以大寫字母開頭，這是因為 React 會將以小寫字母開頭的元素解釋為 HTML 標籤。
2. 返回 一個JSX根元素：函式元件應該返回一個 JSX 元素。
   如上方範例的App元件，最外層包了一個 <div> </div> 標籤，它也可以縮寫為 <> </> ，若把做外層的 <div> </div> 標籤移除，在此範例中會顯示為

 
 <MyButton/>  
 <button>Click Me Again</button>

會是返回兩個JSX元素，就馬上會報出錯誤！

再來看模組化的好處－分檔

如果把所有頁面的元件都集中寫在 app.js 檔案裡頭，
隨著日後的開發，肯定會越來越龐大，
這時在管理與維護上光看到成千上萬的程式碼堆積在那邊，
心裡都涼一半了！
還要找問題在哪邊，可能頭很大！
因此，需要將程式碼拆分出來各別處理。

動手做一個卡片元件

來做一個卡片的元件
在 src/ 下 ，新增一個conponent資料夾，
專案架構會比較明確，看到資料夾名稱就知道用途。
在此資料夾中新增 Card.js 檔案

function Card() {
  return (
    <div className="card">
      <h2 className="card-title">Card Title 1</h2>
      <p className="card-content">This is the content of the first card.</p>
      <button className="card-button">Click Me</button>
    </div>
  )
}

export default Card

接著到
App.css 新增卡片的樣式

.card {
  width:100%;
  max-width:400px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align:center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 8px;
}

.card-content {
  font-size: 1em;
  margin-bottom: 16px;
}

.card-button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

最後，我們要引入 Card元件，來到 App.js

import './App.css';
import Card from './component/Card';

function App() {
  return (
    <>
	    <Card />
    </>
  );
}

export default App;

就可以看到畫面是

如果要有兩個一樣的卡片，我們就可以在新增

import './App.css';
import Card from './component/Card';

function App() {
  return (
    <>
    <Card />
    <Card />
    </>
  );
}

export default App;

但發現這些卡片的內容都是固定寫死的，好像用起來不好用欸！！！
這時候我們就要學到 props 資料傳遞的功能，這些內容我們明天來說明。

來複習一下今天所學到的內容重點吧：

Function Component的規則

1. 必須以大寫字母開頭：函式元件的名稱必須以大寫字母開頭，這是因為 React 會將以小寫字母開頭的元素解釋為 HTML 標籤。
2. 返回 一個JSX元素：函式元件應該返回一個 JSX 元素。最外層包了一個 <div> </div> 標籤，它也可以縮寫為 <> </>

Function Component帶來的好處

1. 將重複的元素抽出來寫成元件，能夠重複使用與增加維護的便利性。
2. 可透過分檔的方式，拆分元件功能使維護更加方便。

後記

本文將會同步更新到我的部落格，歡迎大家來blog參觀~

• 黃禎平 – Medium